<template>
    <div class="layout">
        <!-- 首先横排上分为三个竖着的方框
        然后从左到右依次为账号注册、账号撤销、账号密码更改 -->
        <div class="left">
            <div class="title">
                账号注册
            </div>
            <div class="workspace">
                <form @submit.prevent="handleSubmit_res">
                    <div class="form-item">
                        <label for="adminId">注册管理员ID：</label>
                        <input id="adminId" v-model.number="formValue.adminId" type="text" required
                            placeholder="请输入管理员ID">
                    </div>
                    <div class="form-item">
                        <label for="adminName">注册管理员姓名：</label>
                        <input id="adminName" v-model="formValue.adminName" type="text" required placeholder="请输入管理员姓名">
                    </div>
                    <div class="form-item">
                        <label for="level">选择注册级别：</label>
                        <select id="level" v-model.number="formValue.level" required>
                            <option value="" disabled selected>请选择管理员级别</option>
                            <option value="1">A级管理员</option>
                            <option value="2">B级管理员</option>
                            <option value="3">C级管理员</option>
                        </select>
                    </div>
                    <button type="submit">
                        提交
                    </button>
                </form>
            </div>
        </div>
        <div class="middle">
            <div class="title">
                账号注销
            </div>
            <div class="workspace">
                <form @submit.prevent="handleSubmit_logout">
                    <div class="form-item">
                        <label for="adminId">注销管理员ID：</label>
                        <input id="adminId" v-model.number="formValue.adminId" type="text" required
                            placeholder="请输入管理员ID">
                    </div>
                    <button type="submit">
                        提交
                    </button>
                </form>
            </div>
        </div>
        <div class="right">
            <div class="title">
                账号密码修改
            </div>
            <div class="workspace">
                <form @submit.prevent="handleSubmit_passwordchange">
                    <div class="form-item">
                        <label for="adminId">密码修改管理员ID：</label>
                        <input id="adminId" v-model.number="formValue.adminId" type="text" required
                            placeholder="请输入管理员ID">
                    </div>
                    <button type="submit">
                        提交
                    </button>
                </form>
            </div>
        </div>
    </div>
</template>
<script lang="js" setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';
// 引入Element Plus的消息提示组件
const thisAdminId = localStorage.getItem('adminId');
const formValue = ref({
    adminId: null,
    adminName: '',
    level: null,
})
const handleSubmit_res = async () => {
    console.log('提交管理员账号注册表单');
    // 这里可以添加实际的注册逻辑，比如发送到服务器
    try {

        const response = await axios.post(`http://localhost:8080/admin/${thisAdminId}/registerAdmin`, {
            "adminId": formValue.value.adminId,
            "name": formValue.value.adminName,
            "level": formValue.value.level,
        })
        if (response.data.code === 200) {
            ElMessage.success('管理员账号注册成功');
            // 提交之后清空表单
            formValue.value.adminId = null;
            formValue.value.adminName = '';
            formValue.value.level = null;
        } else {
            ElMessage.error(response.data.msg || '管理员账号注册失败');
        }
    } catch (error) {
        ElMessage.error('未知错误，请稍后再试');
    }

}
const handleSubmit_logout = async () => {
    console.log('提交管理员账号注销表单');
    try {
        const response = await axios.delete(
            `http://localhost:8080/admin/${formValue.value.adminId}/${thisAdminId}/deleteAdmin`
        );
        if (response.data.code === 200) {
            ElMessage.success('管理员账号注销成功');
            // 清空表单
            formValue.value.adminId = null;
        } else {
            ElMessage.error(response.data.msg || '管理员账号注销失败');
        }
    } catch (error) {
        ElMessage.error('未知错误，请稍后再试');
    }
};
const handleSubmit_passwordchange = async () => {
    console.log('提交管理员账号密码修改表单');
    // 这里可以添加实际的密码修改逻辑，比如发送到服务器
    try {
        const response = await axios.put(`http://localhost:8080/admin/${formValue.value.adminId}/setOtherAdminPassword`,
            thisAdminId, {
            headers: {
                'Content-Type': 'application/json'
            }
        }
        );
        if (response.data.code == 200) {
            ElMessage.success("成功重置该管理员密码");
            // 提交之后清空表单
            formValue.value.adminId = null;
        } else {
            ElMessage.error(response.data.msg || '密码重置失败');
        }
    } catch (error) {
        ElMessage.error('未知错误，请稍后再试');
    }
}
</script>
<style lang="scss" scoped>
.layout {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 32px;
    padding: 40px 0;
    background: #f4f8fb;
    min-height: 100vh;

    .left,
    .middle,
    .right {
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 4px 16px rgba(90, 169, 233, 0.08);
        padding: 32px 28px 28px 28px;
        width: 340px;
        min-height: 420px;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: box-shadow 0.2s;

        &:hover {
            box-shadow: 0 8px 24px rgba(90, 169, 233, 0.18);
        }

        .title {
            font-size: 24px;
            font-weight: bold;
            color: #357ab8;
            margin-bottom: 24px;
            letter-spacing: 2px;
        }

        .workspace {
            width: 100%;

            form {
                display: flex;
                flex-direction: column;
                gap: 22px;

                .form-item {
                    display: flex;
                    flex-direction: column;
                    gap: 8px;

                    label {
                        font-size: 16px;
                        color: #333;
                        font-weight: 500;
                    }

                    input,
                    select {
                        padding: 12px;
                        border: 1.5px solid #bcdffb;
                        border-radius: 6px;
                        font-size: 17px;
                        background: #f7fbfe;
                        transition: border 0.2s;

                        &:focus {
                            border-color: #5ba9e9;
                            outline: none;
                            background: #fff;
                        }
                    }

                    select {
                        cursor: pointer;
                    }
                }

                button[type="submit"] {
                    margin-top: 8px;
                    padding: 12px 0;
                    background: linear-gradient(90deg, #5ba9e9 0%, #357ab8 100%);
                    color: #fff;
                    border: none;
                    border-radius: 6px;
                    font-size: 18px;
                    font-weight: bold;
                    cursor: pointer;
                    box-shadow: 0 2px 8px rgba(90, 169, 233, 0.10);
                    transition: background 0.2s, box-shadow 0.2s;

                    &:hover {
                        background: linear-gradient(90deg, #357ab8 0%, #5ba9e9 100%);
                        box-shadow: 0 4px 16px rgba(90, 169, 233, 0.18);
                    }
                }
            }
        }
    }
}
</style>